<template>
  <tl-sub-page :render="render" ref="drawerRef" :visible.sync="visible" :with-header="false" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true" class="tl-drawer editPage" :size="'95%'" @open="open" @close="close" :destroy-on-close="true">
    <div class="mpm-project-container">
      <div style="width:0px;overflow:hidden;height:0px;"><input type="text" /></div>
      <div class="mpm-project-header">
        <div class="info">
          <img src="/static/images/paojectManager/mpm_projectCommunication_drawer.png" class="logo" style="width: 55px;height: 55px" />
          <div class="content">
            <p>
              <b>{{ projectinfo.projectname }}</b>
              <b>-项目沟通</b>
            </p>
            <p class="light">
              <span>项目经理：{{ projectinfo.projectmanager + '【' + projectinfo.projectmanagercode + '】' }}</span>
            </p>
          </div>
        </div>
        <div class="toolbar">
          <el-button type="danger" icon="el-icon-close" circle @click="doCancelEdit"></el-button>
        </div>
      </div>
      <div class="mpm-project-main" :style="{ height: mainHeight + 'px' }">
        <div id="mpmMainContainer">
          <div style="padding:0 1px;height:100%;">
            <meet-edit-comp :key="id" render="div" width="100%" :height="mainHeight + 1 + 'px'" :attendcodes="attendcodes" :attendnames="attendnames" :sourcetype="queryParam.qry_sourcetype" :sourceid="queryParam.qry_sourceid" :sourceapp="queryParam.qry_sourceapp" :meetId="Number(id)" :disableEditSubmit="disableEditSubmit"></meet-edit-comp>
          </div>
        </div>
      </div>
    </div>
  </tl-sub-page>
</template>

<script>
/** mixins */
/** 子组件 */
import meetEditComp from '../../../components/meet/meetEditComp'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
/** VUE配置 */
export default {
  components: { meetEditComp },
  data() {
    return {
      moduleTitle: '沟通计划',
      // url配置
      url: {
        list: '/mpm/projectStakeholder/list',
        queryPMOApproval: '/mpm/pMOStandardizationRecord/queryPMOApproval'
      },
      // 编辑界面可见
      visible: false,
      // 是否添加
      isAdd: false,
      // 编辑按钮是否可见
      disableEditSubmit: false,
      // 数据主键
      id: 0,
      attendcodes: '',
      attendnames: '',
      mainHeight: 1000
    }
  },
  props: {
    // 当前元素展示方式。默认为dialog，可选div/el-drawer
    render: {
      default: 'el-drawer',
      type: String
    },
    // 项目信息
    projectinfo: {
      type: Object,
      default: () => {}
    },
    queryParam: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    /** 抽屉组件必重写，主要为了执行resizeHandler方法、给mainScrollElement赋值，并添加监听事件，不要直接复制该方法 */
    open() {
      this.model = {}
      this.resizeHandler()
      this.$nextTick(() => {
        if (this.isAdd) {
          this.assignDefaultValue()
        }
        this.loaded()
      })
    },
    loaded() {
      // 页面加载完毕执行
    },
    /** 初始化数据 */
    assignDefaultValue() {
      this.id = 0
    },
    /** 查询相关方人员 */
    queryStakeholderList() {
      let userList = []
      getAction(this.url.list, { qry_projectcode: this.projectinfo.projectcode, qry_enabled: 1, currentPage: 1, pageSize: 2000 }).then((res) => {
        let stakeholderList = res.result.dataList
        // 默认显示Sponsor、Owner、项目经理、各项目组组长,并去除重复人员
        stakeholderList = stakeholderList.filter((item) => item.grouprolecode === 'sponsor' || item.grouprolecode === 'owner' || item.grouprolecode === 'pm' || item.grouprolecode === 'groupleader')
        stakeholderList.forEach((user) => {
          userList.push({ usercode: user.usercode, username: user.username })
        })
        getAction(this.url.queryPMOApproval, { qry_projectcode: this.projectinfo.projectcode }).then(response => {
          response.result.forEach((user) => {
            userList.push({ usercode: user.usercode, username: user.username })
          })
          userList = this.reduceUserList(userList)
          this.attendcodes = userList.map(item => item.usercode).join(',')
          this.attendnames = userList.map(item => item.username).join(',')
        })
      })
    },
    /** 抽屉组件必有 */
    doCancelEdit() {
      this.visible = false
      this.$emit('close')
      this.$emit('refresh')
    },
    close() {},
    /** 抽屉组件必有 */
    resizeHandler() {
      this.mainHeight = document.body.getBoundingClientRect().height - 90
    },
    /** 抽屉组件必有 */
    formatDate(date) {
      return formatDate(new Date(date ? date.toString().replace(/\-/g, "/") : date), "yyyy-MM-dd")
    },
    reduceUserList(userList) {
      let obj = {}
      userList = userList.reduce((newArr, next) => {
        obj[next.usercode] ? "" : (obj[next.usercode] = true && newArr.push(next))
        return newArr
      }, [])
      return userList
    }
  },
  created() {
    this.queryStakeholderList()
    // 抽屉组件必有
    window.addEventListener('resize', this.resizeHandler)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resizeHandler)
    })
  }
}
</script>

<style lang="scss" scoped>
.mpm-project-container .mpm-project-main {
  padding-bottom: 0;
}
</style>
